<template>
	<z-paging
		ref="page"
		v-model="dataList"
		@query="query"
	>
		<view class="pageCountainer">
			<view
				class="pageCountainer_orderItem"
				v-for="item in dataList"
				:key="item.id"
				@click.stop="toProductMessage(item)"
			>
				<u-image
					width="136rpx"
					height="136rpx"
					radius="8rpx"
					src="https://oneredhealth.oss-cn-hangzhou.aliyuncs.com/2023/11/22/380582008a1a43158f0b89ebb8d7569f.png"
					@click="toProductDetail(item)"
				/>
				<view class="pageCountainer_orderItem_right">
					<view>
						<u-text
							:text="item.productName"
							size="28rpx"
							color="#3d3d3d"
							lines="1"
							bold
						/>
					</view>
					<view>
						<u-text
							:text="'x' + item.number"
							size="26rpx"
							color="#666666"
						/>
					</view>
					<view class="pageCountainer_orderItem_right_bottom">
						<view style="display: flex; align-items: center">
							<view>
								<u-text
									size="24rpx"
									color="#588BF3"
									:text="`已使用:${item.useNumber}`"
								/>
							</view>
							<view style="margin-left: 14rpx">
								<u-text
									size="24rpx"
									color="#588BF3"
									:text="`待使用: ${item.number - item.useNumber}`"
								/>
							</view>
						</view>
						<u-icon
							name="arrow-right"
							color="#588BF3"
							size="22rpx"
						/>
					</view>
				</view>
			</view>
		</view>
	</z-paging>
</template>

<script>
	import { getProductList, orderList } from "@/api/health_service.js"

	export default {
		data() {
			return {
				orderNo: "",
				dataList: []
			}
		},
		onLoad(options) {
			this.orderNo = options.orderNo
		},
		methods: {
			toProductMessage(item) {
				uni.navigateTo({
					url: `/pages_my/product_message/index?id=${item.id}`
				})
			},
			toProductDetail(item) {
				uni.navigateTo({
					url: `/pages_shop1/goods/index?id=${item.id}`
				})
			},
			async query(pageNum, pageSize) {
				const params = {
					pageNum,
					pageSize,
					orderNo: this.orderNo
				}
				const result = await getProductList(params)
				this.$refs.page.complete(result.rows)
			}
		}
	}
</script>

<style lang="scss">
	.pageCountainer {
		width: 100vw;
		padding: 24rpx 32rpx;
		box-sizing: border-box;

		&_orderItem {
			display: flex;
			width: 686rpx;
			height: 170rpx;
			border-radius: 16rpx;
			margin-bottom: 24rpx;
			padding: 16rpx;
			box-sizing: border-box;
			background-color: #fff;
			justify-content: space-between;
			align-items: center;

			&_right {
				width: 500rpx;
				height: 100%;
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				&_bottom {
					width: 100%;
					display: flex;
					justify-content: space-between;
				}
			}
		}
	}
</style>
